<template>
  <div class="todo-container">
    <h2>任务清单</h2>
    <el-input
      v-model="newTodo"
      placeholder="请输入新任务"
      @keyup.enter="addTodo"
      class="todo-input"
    >
      <template #append>
        <el-button @click="addTodo">添加</el-button>
      </template>
    </el-input>

    <el-card class="todo-list">
      <el-checkbox-group v-model="completedTodos">
        <div v-for="todo in todos" :key="todo.id" class="todo-item">
          <el-checkbox :label="todo.id">
            <span :class="{ 'completed': completedTodos.includes(todo.id) }">
              {{ todo.text }}
            </span>
          </el-checkbox>
          <el-button
            type="danger"
            size="small"
            @click="removeTodo(todo.id)"
            icon="Delete"
          />
        </div>
      </el-checkbox-group>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const newTodo = ref('')
const todos = ref([])
const completedTodos = ref([])

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value.trim()
    })
    newTodo.value = ''
  }
}

const removeTodo = (id) => {
  todos.value = todos.value.filter(todo => todo.id !== id)
  completedTodos.value = completedTodos.value.filter(todoId => todoId !== id)
}
</script>

<style scoped>
.todo-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.todo-input {
  margin-bottom: 20px;
}

.todo-list {
  margin-top: 20px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.todo-item:last-child {
  border-bottom: none;
}

.completed {
  text-decoration: line-through;
  color: #999;
}
</style> 